<!--
/**
* Author: gaohui
* Date: 2023-03-01 11:16
* Desc: CompLife 组件生命周期
*/
-->

<template>
  <title-line title="组件生命周期(详见控制台输出内容)" />
  <div class="mb10">初始文本: {{ str }}</div>
  <div>
    <el-button @click.stop="changeStr">试试看修改值会触发什么生命周期函数</el-button>
  </div>
</template>

<script name="CompLife" lang="ts" setup>
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onUnmounted,
  onUpdated,
  onMounted,
  onActivated,
  onDeactivated,
  ref,
} from "vue";
import { showMessage } from "@/utils/msgUtil";

// 参考官方文档 https://cn.vuejs.org/api/composition-api-lifecycle.html

// 在组件被挂载之前被调用
onBeforeMount(() => {
  console.log("onBeforeMount");
});

// 在组件挂载完成后执行
onMounted(() => {
  console.log("onMounted");
});

// 在组件实例被卸载之后调用
onUnmounted(() => {
  console.log("onUnmounted");
});

// 在组件实例被卸载之前调用
onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
});

// 在组件即将因为响应式状态变更而更新其 DOM 树之前调用
onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
});

// 在组件因为响应式状态变更而更新其 DOM 树之后调用
onUpdated(() => {
  console.log("onUpdated");
});

// 若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用
onActivated(() => {
  console.log("onActivated");
});

// 若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
onDeactivated(() => {
  console.log("onDeactivated");
});

// 该输出语句会在上述生命周期之前执行
console.log("生命周期外执行的方法");

const str = ref("hello");
const changeStr = () => {
  str.value = "hey";
  showMessage("可以打开控制台查看输出结果~");
};
</script>
<style lang="scss" scoped></style>
